<template>
  <div v-if="data">
    <a-modal title="修改购买须知" :visible="visible" :width="860" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <div class="upload-tips tab-middle-tips mb10">
        <div>
          1、双击选项可进行编辑选项内容，点击“保存设置”即可保存
        </div>
        <div>
          2、购买须知为“通用展示”则为所有上线渠道中均展示该购买须知，“主线展示”则在主线渠道中展示该购买须知，“抖音展示”则在抖音平台中展示该购买须知
        </div>
        <div>
          3、修改操作需在产品套餐提交SPU审核前或驳回之后进行，修改保存后需要重新提交SPU审核，抖音平台才能重新对购买须知内容进行审核
        </div>
      </div>
      <div class="bg-fff-box tab-middle-top" v-if="data && data.titleList.length > 0">
        <div class="form-box pl20 pt18" v-for="(item, i) in data.titleList" :key="'item' + i">
          <template v-if="item.platform !== 1">
            <div class="label mr6 ">
              【{{ item.titles }}】
              <div class="pl8 mt5 label-subtitle-color">{{ item.platformName }}</div>
            </div>
            <div class="form-item">
              <a-row v-for="(el, index) in item.option" :key="'el' + index" class="mb14">
                <a-checkbox-group :value="item.checkedList" @change="checkedListChange(i + '-' + index, $event)">
                  <a-checkbox :value="i + '-' + index">
                    <div @dblclick="handledblclick(i, index, true)" v-if="!el.inputShow" class="checkboxText">{{ el.optionName || '请双击输入' }}</div>
                    <a-input
                      class="checkboxText"
                      style="display:inline-block;width:400px"
                      v-if="el.inputShow"
                      @blur="handledblclick(i, index, false)"
                      v-model="el.optionName"
                      :autofocus="el.inputShow"
                    />
                  </a-checkbox>
                </a-checkbox-group>
              </a-row>
            </div>
          </template>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { updateDaYunBuyNotice, updateDaYunBuyNoticeManager } from '@/service'
export default {
  name: 'instructionsPurchaseSetting',
  model: {
    props: 'value',
    event: 'change'
  },
  props: {
    instructionsPurchase: { type: Boolean, default: false },
    productId: { type: Number, default: null },
    data: { type: Object },
    value: { type: Boolean },
    role: { type: String, default: '0' }
  },
  computed: {
    visible: {
      get() {
        if (!this.data) return false
        return this.value
      },
      set(v) {
        this.$emit('change', v)
      }
    }
  },
  data() {
    return {
      confirmLoading: false
    }
  },
  methods: {
    async handleOk() {
      this.confirmLoading = true
      try {
        if (this.role === '1') {
          await updateDaYunBuyNoticeManager({ ...this.data })
        } else {
          await updateDaYunBuyNotice({ ...this.data })
        }

        this.$messageSend.success('成功')
        this.confirmLoading = false
        this.handleCancel()
      } catch (error) {
        this.confirmLoading = false
      }
    },
    handleCancel() {
      this.visible = false
    },
    checkedListChange(a, b) {
      let arrI = a.split('-')
      let i = arrI[0]
      let index = arrI[1]
      let checked = !!b.length
      if (checked) {
        console.log(a)
        console.log(this.data.titleList[i])
        let el = this.data.titleList[i].option[index]
        this.data.titleList[i].option[index] = {
          ...el,
          getChecked: true
        }
        this.data.titleList[i].checkedList ? this.data.titleList[i].checkedList.push(a) : (this.data.titleList[i].checkedList = b)
      } else {
        // 删除
        let el = this.data.titleList[i].option[index]
        this.data.titleList[i].option[index] = {
          ...el,
          getChecked: false
        }
        let j = this.data.titleList[i].checkedList.indexOf(a)
        console.log(j)
        this.data.titleList[i].checkedList.splice(j, 1)
      }
      // this.form.buyNoticeDetailVO = {
      //   ...this.data,
      //   titleList: this.data.titleList
      // }
    },
    handledblclick(i, index, flag) {
      console.log(i)
      let { titleList } = this.data
      // if (!titleList[i].option[index].optionName) return false;
      titleList[i].option[index].inputShow = flag
      this.data = {
        ...this.data,
        titleList
      }
      // this.form.buyNoticeDetailVO = {
      //   ...this.data,
      //   titleList
      // }
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scpoed>
.tab-middle-top {
  padding-bottom: 108px;
  border-radius: 2px;
  border: 1px solid #f0f0f0;
  .form-box {
    display: flex;
  }
  .label-subtitle-color {
    color: #0090ff;
    font-size: 12px;
    font-weight: 400;
  }
}
.upload-tips {
  color: #f5894e;
  font-size: 10px;
  transform: scale(1);
  line-height: 22px;
}
.tab-middle-tips {
  width: 100%;
  border-radius: 2px;
  border: 1px solid #f5894e;
  // height: 67px;
  background: rgba(245, 137, 78, 0.1);
  padding: 8px;
  line-height: normal;
}
.form-item {
  flex: 1;
}

.ant-checkbox-wrapper {
  display: flex;
  align-items: center;
  .checkboxText {
    flex: 1;
  }
  .ant-checkbox {
    width: 16px;
    height: 16px;
  }
}
</style>
